<template>
  <div class="login-view">
    <van-image class="background-image" :src="require('@/assets/login_bg@3x.png')" />
    <div class="login-box">
      <img src="../../assets/login_logo@2x.png" alt class="logo" />
      <div class="title">欢迎登录</div>
      <van-form @submit="onSubmit" class="formBox">
        <van-field
          v-model="user.mobile"
          required
          type="tel"
          :left-icon="require('../../assets/login_input_ico_user@2x.png')"
          placeholder="输入账号"
          :rules="[
            {
              required: true,
              message: '请填写手机号',
              pattern: /^1[3-9]\d{9}$/,
            },
          ]"
        />
        <van-field
          v-model="user.code"
          required
          type="password"
          name="code"
          :left-icon="require('../../assets/login_input_ico_password@2x.png')"
          placeholder="输入密码"
          :rules="[{ required: true, message: '请填写密码', pattern: /^\d{6}$/ }]"
        />
        <div>
          <van-button
            round
            block
            type="info"
            native-type="submit"
            :disabled="isloading"
            :loading="isloading"
            loading-text="正在登陆"
          >登录</van-button>
        </div>
        <!-- 复选框 -->
        <van-field name="checkbox" :rules="[{ required: true, message: '请勾选同意用户协议和隐私政策' }]">
          <template #input>
            <van-checkbox v-model="checked" required>登录注册表示您同意《用户协议》和《隐私政策》</van-checkbox>
          </template>
        </van-field>
      </van-form>
    </div>
  </div>
</template>

<script>
import { RadioGroup, Radio, Checkbox } from "vant";
import { loginAPI } from "@/api";
import Notify from "@/ui/Notify.js";
import { setToken } from "@/utils/token";
import { setStorage } from "@/utils/Storage.js";

export default {
  components: {
    VanRadioGroup: RadioGroup, // 注册 RadioGroup 组件
    VanRadio: Radio, // 注册 Radio 组件
    VanCheckbox: Checkbox
  },
  data() {
    return {
      user: {
        mobile: "19179631663", 
        code: "246810" // 黑马接口默认密码
      },
      isloading: false,
      checked: "1"
    };
  },
  methods: {
    onChange() {},
    async onSubmit() {
      this.isloading = true;
      try {
        const res = await loginAPI(this.user);
        console.log(res);
        Notify({ type: "success", message: "登录成功" });
        setToken(res.data.data.token);
        setStorage("refresh_token", res.data.data.refresh_token);
        this.$router.replace({
          path: this.$route.query.path || "/layout/home"
        });
        // console.log(res)
      } catch (err) {
        // 抛出错误会直接进入这里
        Notify({ type: "danger", message: "账号或密码错误" });
        console.log(err);
      }
      this.isloading = false;
    }
  }
};
</script>

<style scoped lang="less">
img {
  display: block;
}
.login-view {
  .background-image {
    width: 100%;
    height: 8.9867rem; // 根据需要设置高度
    position: relative;
    background-size: cover;
    background-position: center;
  }
  .login-box {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    padding: 2.1333rem 0.4267rem;
    top: 0;
    left: 0;
    .logo {
      width: 1.2267rem;
      height: 1.12rem;
    }
    .title {
      padding-top: 0.4267rem;
      font-weight: 600;
      font-size: 0.64rem;
      color: #222222;
      line-height: 0.88rem;
    }
    .formBox {
      margin-top: 1.3333rem;
      background: none;
      .van-cell {
        margin: 0.5333rem 0;
        border-radius: 0.6667rem;
      }
      .van-button--info {
        margin-top: 2.1333rem;
        background: #05afea;
        box-shadow: 0px 3px 13px 0px #95bfe7;
        border-radius: 24px;
      }
      .radio-box {
        margin-top: 2.1333rem;
      }
    }
  }
}
/deep/ .van-checkbox__icon .van-icon {
  font-size: 0.3733rem;
}
/deep/ .van-checkbox__label {
  font-weight: 400;
  font-size: 0.32rem;
  color: #bfbfbf;
  line-height: 0.4533rem;
}
/deep/ .van-checkbox__icon--checked .van-icon {
  background: #fff;
  color: #05afea;
  border-color: #05afea;
  font-size: 0.3733rem;
}
/deep/ .van-field__left-icon .van-icon {
  font-size: 0.5333rem;
}
/deep/ .van-icon__image {
  width: 0.5333rem;
  height: 0.5333rem;
}
.van-nav-bar {
  background-color: #007bff;
}
/deep/ .van-nav-bar__title {
  color: white;
}
.tip {
  width: 100px;
  height: 20px;
  font-size: 12px;
  color: #ccc;
}
@media (min-width: 768px) {
  .login-view .background-image {
    background-image: url("../../assets/login_bg@3x.png"); // 宽屏幕背景图
  }
}

@media (max-width: 767px) {
  .login-view .background-image {
    background-image: url("../../assets/login_bg@2x.png"); // 窄屏幕背景图
  }
}
</style>
